<template>
  <div class="setting">
    <div class="setting-top">
      <el-button type="primary" round>添加</el-button>
    </div>
    <div class="setting-table">
      <el-table
        :data="list"
        style="width: 100%"
        default-expand-all
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="序号">
          <template slot-scope="scope">{{scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column prop="name" label="功能名称"></el-table-column>
        <el-table-column label="图标">
          <template slot-scope="scope">
            <!-- <p>{{list[scope.$index]['icon']}}</p> -->
            <div
              v-if="scope.row['icon']!=''"
              style="background:#eee;display: inline-block;padding:0 .1rem"
            >
              <img :src="scope.row['icon']" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="控制器/方法"></el-table-column>
        <el-table-column prop="name" label="是否菜单"></el-table-column>
        <el-table-column prop="name" label="状态"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="edit(scope.$index,list)" type="text" size="small">确定</el-button>
            <el-button
              @click.native.prevent="delectColumn(scope.row,list)"
              type="text"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    console.log(this.list);
  },
  methods: {
    delectColumn(row, list) {
      row.isShow = false;
      this.updata(list);
    },
    edit(index, list) {
      // row.isShow = false;
    },
    updata(list) {
      for (let i = list.length - 1; i >= 0; i--) {
        console.log(list[i]['name']);
        if (list[i]["isShow"] == false) {
          switch (list[i]['name']) {
            case '控制面板':
              break;
            case '功能配置':
              break;
            default: list.splice(i, 1);
              break;
          }
          
        } else {
          if (list[i]["children"] != undefined) {
            this.updata(list[i]["children"]);
          }
        }
      }
    },
  },
  props: {
    list: Array,
  },
};
</script>

<style lang='scss' scoped>
.setting {
  &-table {
    overflow-y: scroll;
    height: 90vh;
  }
  &-top {
    .el-button {
      background: #cdebff;
      color: #006ab4;
    }
    padding: 0.1rem;
    display: flex;
    border-bottom: solid 1px #eee;
  }
  background: #fff;
}
</style>

<style lang="scss">
.setting {
  &-table {
    .el-table th {
      background: #f0f9ff !important;
    }
  }
}
</style>